import * as echarts from '../components/ec-canvas/echarts';
var http = require('../../script/order.js');
import { getRandomColor } from '../../utils/util'
Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    key: {
      type: Number,
      value: 0
    },
  },
  observers: {
    'key': function (val) {
      if (val != null && val > 0) {
        this.GetData();
      }
    }
  },
  lifetimes: {
    created: function () {
      this.GetData();
    },
    attached: function () {

    },
    ready: function () {
      this.ecComponent_blotprogress = this.selectComponent('#blotprogress-chart-dom');
      this.initBlotProgressChart();
    },
    detached: function () {
      if (this.ecComponent_blotprogress) {
        this.ecComponent_blotprogress.dispose();
        this.ecComponent_blotprogress = null;
      }
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    SumInfo: {
      CloseNum: 0,
      OpenNum: 0,
      OrderNum: 0,
    },
    ecAuditProblem: {
      lazyLoad: true
    },
    ProgressTotal: null,
    BlotProgressData: [],
    noProgressData: false,
    color: ['#01e1fb', '#00a8ff', '#3270ff', '#40e1d1', '#ff9900', '#ff6600', '#ff0000'],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    GetData() {
      http.GetValveTotalData().then(res => {
        if (res.code === 200) {
          this.setData({
            SumInfo: {
              CloseNum: res.data.CloseNum,
              OpenNum: res.data.OpenNum,
              OrderNum: res.data.OrderNum,
            },
            ProgressTotal: res.data.ProgressTotal,
          });
          this.getProgressData();
        }
      })
    },
    getProgressData() {
      let list = [];
      let noData = false;
      if (this.data.ProgressTotal == null) {
        noData = true;
      } else {
        let total = 0;
        for (let k in this.data.ProgressTotal) {
          const val = this.data.ProgressTotal[k] ? this.data.ProgressTotal[k] : 0
          list.push({
            name: k,
            value: val
          });
          total += val;
        }
        for (var j = 0; j < list.length; j++) {
          list[j].rate = total === 0 ? 0 : ((list[j].value / total) * 100).toFixed(2);
          if (j > this.data.color.length) {
            this.data.color.push(getRandomColor())
          }
        }
        noData = list.length === 0;
      }
      this.setData({
        BlotProgressData: list,
        noProgressData: noData
      });
      this.setBlotProgressChartOption();
    },
    initBlotProgressChart() {
      this.ecComponent_blotprogress.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart_blotprogress = chart;
        this.setBlotProgressChartOption();
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    },
    setBlotProgressChartOption() {
      if(!this.chart_blotprogress) return;
      if (this.data.BlotProgressData.length === 0) return;
      const option = {
        grid: {
          top: "0",
          left: "10",
          right: "10",
          bottom: "10",
          containLabel: true,
        },
        color: this.data.color,
        title: {
          text: "开关栓进度",
          top: "middle",
          left: "center",
          textStyle: {
            color: "#606266",
            fontSize: 13,
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: 'item',
          valueFormatter: function (val) {
            return val + " 个";
          },
          textStyle: {
            color: "#313131",
            fontSize: 13,
          },
          confine: true,
        },
        legend: {
          show: false,
          orient: "vertical",
          right: "20",
          top: "middle",
          itemWidth: 20,
          itemHeight: 15,
          textStyle: {
            color: "#606266",
            fontSize: 13,
          },
        },
        toolbox: {
          show: false,
        },
        series: {
          name: "开关栓进度",
          type: "pie",
          clockWise: false,
          radius: ["45%", "80%"],
          center: ["50%", "50%"],
          hoverAnimation: true,
          avoidLabelOverlap: false,
          padAngle: 3,
          label: {
            show: false,
            formatter: "{b|{b}}\n{d|{d}%}",
            rich: {
              b: {
                fontSize: 12,
                color: "#606266",
                align: "left",
                width: "100%",
              },
              d: {
                fontSize: 14,
                color: "#606266",
                align: "left",
              },
            },
          },
          itemStyle: {
            borderRadius: 6,
          },
          data: this.data.BlotProgressData,
        },
      };
      this.chart_blotprogress.setOption(option);
    }
  }
})